<template>
	<el-dialog v-model="display" title="新增配置" width="800px" center top="10vh">
	  <div class="c50">
		<el-row :gutter="30">
		  <el-col :span="24">
			<p>所属配置项 {{ tabData.activeTab }} ：</p>
			<el-input v-model="tabData.activeTabName" disabled size="large" />
		  </el-col>
		  <el-col :span="24">
			<p>数据类型 data_type ：</p>
			<div v-for="(v, i) in data_type" :key="v.label" class="c51">
			  <div class="c52">{{ v.label }}</div>
			  <el-radio-group v-model="conData.form.data_type">
				<el-radio-button
				  :label="item.value"
				  v-for="(item, index) in v.options"
				  :key="index"
				  >{{ item.label }}</el-radio-button
				>
			  </el-radio-group>
			</div>
		  </el-col>
		  <el-col :span="12">
			<p><span>*</span>名称 title ：</p>
			<el-input
			  v-model.trim="conData.form.title"
			  clearable
			  show-word-limit
			  size="large"
			  maxlength="10"
			  placeholder="请输入"
			/>
		  </el-col>
		  <el-col :span="12">
			<p><span>*</span>键名 key ：</p>
			<el-input
			  v-model.trim="conData.form.key"
			  @blur="blurKey"
			  clearable
			  show-word-limit
			  size="large"
			  maxlength="32"
			  placeholder="请输入"
			/>
		  </el-col>
		  <el-col :span="12">
			<p>排序 sort (数字越大，配置在越前面，0最小) ：</p>
			<el-input
			  v-model.trim="conData.form.sort"
			  clearable
			  size="large"
			  maxlength="32"
			  placeholder="请输入"
			  type="number"
			/>
		  </el-col>
		  <el-col :span="12">
			<p>备注 notes (选填) ：</p>
			<el-input
			  v-model.trim="conData.form.notes"
			  clearable
			  size="large"
			  show-word-limit
			  maxlength="32"
			  placeholder="请输入"
			/>
		  </el-col>
		</el-row>
	  </div>
	  <template #footer>
		<span class="dialog-footer">
		  <el-button @click="display = false" size="large">取消</el-button>
		  <el-button type="primary" @click="addConData" size="large"
			>确定</el-button
		  >
		</span>
	  </template>
	</el-dialog>
  </template>
  
  <script setup>
  import publicJS from "@/hook/public.js";
  const { ElMessage, defaultImg, api } = publicJS();
  const emit = defineEmits(["update:show", "reload"]);
  const props = defineProps({
	show: {
	  type: Boolean,
	  default: false,
	},
	tabData: {
	  type: Object,
	  default: () => {
		return {};
	  },
	},
  });
  
  const conData = reactive({
	show: false,
	form: {
	  title: "",
	  data_type: "input",
	  key: props.tabData.activeTab + "_",
	  sort: 0,
	  arr: "n",
	  notes: "",
	},
  });
  
  const display = ref(true);
  
  watch(
	props,
	(newVal, oldVal) => {
	  display.value = newVal.show;
	  conData.form.key = newVal.tabData.activeTab + "_";
	},
	{ immediate: true }
  );
  
  watch(
	display,
	(newVal, oldVal) => {
	  emit("update:show", newVal);
	},
	{ immediate: true }
  );
  
  //添加组件
  import subData from "../useSubData.js";
  const { data_type, addSubFilter } = subData();
  const addConData = () => {
	if (conData.form.title == "") return ElMessage.error("请输入配置项名称");
	display.value = false;
	//新增普通配置
	api
	  .post("a/common/add_config_list", {
		tabs_type: props.tabData.activeTab,
		...addSubFilter(conData.form),
	  })
	  .then((res) => {
		emit("reload");
	  });
  };
  
  //选择组件 判断
  const subNameChange = (v) => {
	if (v != "imgText") {
	  conData.form.notes = "arr";
	} else {
	  conData.form.notes = "";
	}
  };
  
  const blurKey = () => {
	api
	  .post("a/common/check_config_key", {
		key: conData.form.key,
	  })
	  .then((res) => {
		if (res.data?.id) {
		  ElMessage.warning("键名key值" + conData.form.key + "已被占用，请更换");
		}
	  });
  };
  </script>
  
  <style scoped lang="scss">
  .c50 {
	padding: 0 10px;
  }
  .c50 p {
	line-height: 30px;
	margin-top: 10px;
	color: #333;
	span {
	  color: #c00;
	  display: inline-block;
	  margin-right: 5px;
	}
  }
  .c51 {
	margin-bottom: 10px;
  }
  .c52 {
	margin-bottom: 5px;
	color: #999;
	padding: 0 1px;
  }
  </style>
  